{% extends "base.html" %}
{% load upload_tags %}
<body>
{% block detail %}
    <form id="fileupload" method="post" action="." enctype="multipart/form-data">{% csrf_token %}
        <div class="row fileupload-buttonbar">
            <div class="span7">
                <span class="btn btn-primary fileinput-button">
                    <i class="icon-plus icon-white"></i>
                    <span>Add files...</span>
                    <input type="file" name="file" multiple>
                </span>
                <button type="submit" class="btn btn-success start">
                    <i class="icon-upload icon-white"></i>
                    <span>Start upload</span>
                </button>
                <button type="reset" class="btn btn-warning cancel">
                    <i class="icon-ban-circle icon-white"></i>
                    <span>Cancel upload</span>
                </button>
                <button type="button" class="btn btn-danger delete">
                    <i class="icon-trash icon-white"></i>
                    <span>Delete files</span>
                </button>
                <input type="checkbox" class="toggle">
            </div>
            <div class="span5 fileupload-progress fade">
                <div class="progress progress-success progres-striped active">
                    <div class="bar" style="width:0%"></div>
                </div>
                <div class="progress-extended">&nbsp;</div>
            </div>
        </div>
        <div class="fileupload-loading"></div>
        <table class="table table-striped">
            <tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody>
        </table>
    </form>
    <div class="fileupload-content">
        <table class="files"></table>
        <div class="fileupload-progressbar"></div>
    </div>
    <div>
        {% if pictures %}
            <h2>Already uploaded</h2>
            <table class="table table-striped">
                {% for picture in pictures %}
                    <tr>
                        <td class="preview">
                            <img src="{{ picture.file.url }}">
                        </td>
                        <td class="name">{{ picture.slug }}</td>
                        <td class="delete">
                            <a class="btn btn-danger" href="{% url 'upload-delete' picture.id %}">
                                <i class="icon-trash icon-white"></i>
                                <span>Delete</span>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </table>
            <p>(Removing from this list is left as an exercise to the reader)</p>
        {% endif %}
    </div>
{% endblock %}
{% block style %}
    <link rel="stylesheet" href="/assets/js/jQuery-File-Upload-master/css/jquery.fileupload-ui.css">
    <!-- Bootstrap CSS Toolkit styles -->
    <link rel="stylesheet" href="/assets/js/jQuery-File-Upload-master/css/bootstrap.min.css">
    <!-- Generic page styles -->
    <link rel="stylesheet" href="/assets/js/jQuery-File-Upload-master/css/style.css">
    <!-- Bootstrap styles for responsive website layout, supporting different screen sizes -->
    <link rel="stylesheet" href="/assets/js/jQuery-File-Upload-master/css/bootstrap-responsive.min.css">
    <!-- CSS to style the file input field as button and adjust the Bootstrap progress bars -->
    <link rel="stylesheet" href="/assets/js/jQuery-File-Upload-master/css/bootstrap-image-gallery.min.css">
    <link rel="stylesheet" href="/assets/js/jQuery-File-Upload-master/css/jquery.fileupload-ui.css">
    <!-- Shim to make HTML5 elements usable in older Internet Explorer versions -->
    <!--[if lt IE 9]><script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
{% endblock %}
{% block js %}
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/jquery.ui.widget.js"></script>
    {% comment %}
    <script src="/assets/js/jQuery-File-Upload-master/js/tmpl.min.js"></script>
{% endcomment %}
    <script src="/assets/js/jQuery-File-Upload-master/js/load-image.min.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/canvas-to-blob.min.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/bootstrap.min.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/bootstrap-image-gallery.min.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/jquery.iframe-transport.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/jquery.fileupload.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/jquery.fileupload-fp.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/jquery.fileupload-ui.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/locale.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/main.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/csrf.js"></script>
    <script>
        $(function () {

        });
    </script>
{% endblock %}
</body>